<template>
	<div>
		<page-card title="请假审批列表"
							 :need-back="true">
			<a-form :form="form"
							:label-col="{ span: 8 }"
							:wrapper-col="{ span: 16 }">
				<a-row :gutter="24">
					<a-col :span="6">
						<a-form-item label="选择时间">
							<a-date-picker valueFormat="YYYY-MM-DD"
														 v-decorator="['startTime']">
								<a-icon slot="suffixIcon"
												type="clock-circle" />
							</a-date-picker>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="休假类型">
							<a-select placeholder="请选择"
												v-decorator="['leaveTypeId']">
								<a-select-option value="0">
									事假
								</a-select-option>
								<a-select-option value="1">
									公休假
								</a-select-option>
								<a-select-option value="2">
									病假
								</a-select-option>

								<a-select-option value="3">
									婚假
								</a-select-option>
								<a-select-option value="4">
									产假
								</a-select-option>
								<a-select-option value="5">
									陪产假
								</a-select-option>
								<a-select-option value="6">
									丧假
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="状态">
							<a-select placeholder="请选择"
												v-decorator="['reviewComment']">
								<a-select-option value="0">
									审核通过
								</a-select-option>
								<a-select-option value="1">
									审核中
								</a-select-option>
								<a-select-option value="3">
									审核不通过
								</a-select-option>
								<a-select-option value="4">
									待提交
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-button type="primary"
											@click="handleSearch">
							查询
						</a-button>
						<a-button style="margin-left: 10px"
											@click="resetForm">重置</a-button>
					</a-col>
				</a-row>

			</a-form>
			<a-table :columns="columns"
							 :data-source="data"
							 size="small"
							 :pagination="pagination"
							 :loading="loading"
							 @change="leaveInfoChange">
				<span slot="operation"
							slot-scope="text, record">
					<!-- TODO 页面跳转 -->
					<a v-if="record.finishState == '0'">待审批</a>
					<a v-else>查看详情</a>
				</span>
			</a-table>
		</page-card>
	</div>
</template>

<script>
import { leaveInfoSearch, leaveInfoList } from '@/api/leaveinfo'
const columns = [
	{
		title: '姓名',
		dataIndex: 'userName',
		key: 'userName'
	},
	{
		title: '单位',
		dataIndex: 'deptName',
		key: 'deptName'
	},
	{
		title: '职务',
		align: 'center',
		dataIndex: 'userRole',
		key: 'userRole'
	},
	{
		title: '休假类型',
		align: 'center',
		dataIndex: 'leaveTypeId',
		key: 'leaveTypeId',
		customRender: (val) => {
			switch (val) {
				case 0:
					return '事假'
				case 1:
					return '公休假'
				case 2:
					return '病假'
				case 3:
					return '婚假'
				case 4:
					return '产假'
				case 5:
					return '陪产假'
				case 6:
					return '丧假'
				default:
					return ''
			}
		}
	},
	{
		title: '事由',
		dataIndex: 'leaveReason',
		key: 'leaveReason'
	},
	{
		title: '开始时间',
		align: 'center',
		dataIndex: 'startTime',
		key: 'startTime',
		customRender: (v) => (v ? v.substring(0, 16) : '')
	},
	{
		title: '结束时间',
		align: 'center',
		dataIndex: 'endTime',
		key: 'endTime',
		customRender: (v) => (v ? v.substring(0, 16) : '')
	},
	{
		title: '请假天数',
		align: 'center',
		dataIndex: 'totalDay',
		key: 'totalDay',
		customRender: (v) => (v ? v + '天' : '')
	},
	{
		title: '完成时间',
		align: 'center',
		dataIndex: 'finishTime',
		key: 'finishTime',
		customRender: (v) => (v ? v.substring(0, 16) : '')
	},
	{
		title: '状态',
		align: 'center',
		dataIndex: 'finishState',
		key: 'finishState',
		customRender: (val) => {
			switch (val) {
				case 0:
					return '待审批'
				case 1:
					return '审批通过'
				case 2:
					return '审批不通过'
				default:
					return ''
			}
		}
	},
	{
		title: '操作',
		key: 'operation',
		scopedSlots: { customRender: 'operation' }
	}
]
const data = []
// 假数据
// for (let i = 0; i < 100; i++) {
// 	data.push({
// 		key: i.toString(),
// 		userName: `胡彦斌 ${i}`,
// 		deptName: 'xx部',
// 		userRole: '民警',
// 		leaveTypeId: 0,
// 		leaveReason: '生病',
// 		startTime: '2021-12-26 16:45:54',
// 		endTime: '2021-12-31 16:45:54',
// 		totalDay: 5,
// 		finishTime: '2021-12-31 16:45:54',
// 		finishState: 1
// 	})
// }
export default {
	name: 'ApproveList',
	data() {
		return {
			form: this.$form.createForm(this),
			data,
			columns,
			pagination: {
				current: 1,
				total: 0,
				pageSize: 10,
				showQuickJumper: true,
				showSizeChanger: true,
				pageSizeOptions: ['10', '20', '50', '100'],
				showTotal: (total) => {
					return `共${total}条记录 第/${total}页`
				}
			},
			loading: false,
			searchParams: {},
			pageParams: {}
		}
	},
	methods: {
		load() {},
		leaveInfoChange(pagination, filters, sorter) {
			console.log(pagination)
			this.pageParams.currPage = pagination.current
			this.pageParams.pageSize = pagination.pageSize

			leaveInfoList(this.pageParams).then((response) => {
				this.data = response.list
				this.pagination.current = response.currPage
				this.pagination.total = response.totalCount
			})
		},
		handleSearch() {
			this.form.validateFields((err, values) => {
				if (err) return
				if (
					(values.startTime !== '' && values.signDate != undefined) ||
					(values.leaveTypeId !== '' && values.leaveTypeId != undefined) ||
					(values.reviewComment !== '' && values.reviewComment != undefined)
				) {
					this.searchParams = {}
					for (let item in values) {
						this.searchParams[item] = values[item]
					}
					console.log(this.searchParams)
					leaveInfoSearch(this.searchParams).then((response) => {
						this.data = response.list
						this.pagination.current = response.currPage
						this.pagination.total = response.totalCount
					})
				} else {
					return this.message.error('请输入参数')
				}
			})
		},
		resetForm() {
			this.form.resetFields()
		}
	}
}
</script>

<style scoped>
</style>
